<script setup>
import { ref } from 'vue'
import api from '@/api'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'

const $route = useRoute()
const $router = useRouter()

const props = defineProps(['customId'])
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  id: null,
  order_no: '',
  user_id: '',
  order_type: '',
  order_status: '',
  order_price: '',
  created_at: '',
  custom_name: '',
  company_name: '',
  order_user: '',
})

const getCustomOrderList = async (page) => {
  try {
    const res = await api.get('custom/customOrderList/' + props.customId, {
      params: {
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}

const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
    switch (record.order_type * 1) {
      case 1:
        formData.value.order_type_text = '课程定制'
        break
      case 2:
        formData.value.order_type_text = '课程购买'
        break
    }
    formData.value.order_file = record.order_file
    formData.value.order_content = record.order_content
    formData.value.contacts = record.contacts
  }
  formVisible.value = true
}

defineExpose({
  getCustomOrderList,
})
</script>

<template>
  <div>
    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="项目">
          <template #cell="{ record }">
            <div v-if="record.order_type == 1">课程定制</div>
            <div v-if="record.order_type == 2">课程购买</div>
          </template>
        </a-table-column>
        <a-table-column title="购买时间"
                        data-index="created_at"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-button @click="showFormData(record)"
                        type="primary"
                        size="mini">查看详情</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal title="订单详情"
             width="600px"
             :footer="false"
             v-model:visible="formVisible">
      <a-form>
        <a-form-item label="订单类型">
          <!-- <a-select v-model="formData.order_type" :style="{width:'400px'}" placeholder="请选择订单类型">
            <a-option :value="1">课程定制</a-option>
            <a-option :value="2">课程购买</a-option>
          </a-select> -->
          <a-input readonly
                   v-model="formData.order_type_text"
                   :style="{ width: '400px' }"
                   placeholder="" />
        </a-form-item>
        <a-form-item label="上传文件">
          <a-link :href="formData.order_file"
                  icon>文件地址</a-link>
        </a-form-item>
        <a-form-item label="订单需求">
          <a-textarea readonly
                      v-model="formData.order_content"
                      :style="{ width: '400px' }"
                      placeholder="请输入订单需求" />
        </a-form-item>
        <a-form-item label="联系人">
          <div class="flex fd_c">
            <div v-for="(item, index) in formData.contacts"
                 :key="index"
                 class="mb10 flex at_c">
              <a-input-group class="mr10">
                <a-input readonly
                         v-model="item.name"
                         :style="{ width: '200px' }"
                         placeholder="请输入联系人姓名" />
                <a-input readonly
                         v-model="item.mobile"
                         :style="{ width: '200px' }"
                         placeholder="请输入联系人电话" />
              </a-input-group>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>